<template>
    <div class="el-card is-always-shadow container-style">
        <el-row class="avue-crud__menu">
            <el-col :span="12" class="avue-crud__left" >
                <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus">新 增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="table-sty">
                    <el-table header-row-class-name="tabel-header" :data="tableDataList" border style="width: 100%">
                        <el-table-column type="index" width="50px" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column  v-for="(value) in tableTitleList" :prop="value|pinyin" :label="value"> </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    icon="el-icon-edit" class="el-button el-button--text el-button--small"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                    icon="el-icon-delete" class="el-button el-button--text el-button--small"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="getDialogTitle(action)" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="formData">
                <el-form-item v-for="(value , key) in tableTitleList"  :label="value" :label-width="formLabelWidth">
                    <el-select v-if="key == 0" :name="initialFormField[key]" v-model="formData[initialFormField[key]]" placeholder="请选择">
                        <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-if="key > 0" :name="initialFormField[key]" v-model="formData[initialFormField[key]]" autocomplete="off" ></el-input>
                </el-form-item>
                <el-input type="hidden" ref="dataKey" name="id" v-model="dataKey" ></el-input>
                <el-input type="hidden" ref="actionInfo" v-model="action" ></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-plus-outline" type="primary" @click="submitForm()">保 存</el-button>
                <el-button icon="el-icon-circle-close" @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const pinyin = require("js-pinyin");
const selectList = ["机关服务中心办公区域","信息中心办公区域"];
const selectOptionsList = [];
for (let i in selectList){
    selectOptionsList.push({label : selectList[i] , value : selectList[i]});
}
console.log(selectOptionsList);
const dialogTitle = "区域权限";
const tableTitleList = ["区域名称",  "楼层", "房间" , "房间号", "创建时间", "创建人"];
const dataList = [
    ["机关服务中心办公区域", "7楼", "701、702、703、704、705、706、707、708" , "701、702、703、704、705、706、707、708、708大门、708-1、708-2、708-3", "2023-01-01 08:20:32" , "管理员"],
    ["信息中心办公区域", "15楼", "1501、1502、1503、1504、1506、1507、1508" , "1501、1501-1、1501-2、1501-3、1502、1503、1504、1506、1507、1508", "2023-01-01 08:20:32" , "管理员"],
];

const initialFormField = [];
function setFormData(data = {}){
    let formData = {};
    for (let i in tableTitleList){
        initialFormField[i] = pinyin.getFullChars(tableTitleList[i]);
        if(Object.keys(data).length > 0){
            formData[initialFormField[i]] = data[initialFormField[i]];
        }else {
            formData[initialFormField[i]] = "";
        }
    }
    return formData;
}
const formData = setFormData();

console.log(initialFormField);
const tableDataList = [];
for (let k in dataList){
    let data = {};
    for (let k2 in initialFormField){
        data[initialFormField[k2]] = dataList[k][k2];
    }
    tableDataList.push(data);
}
console.log(tableDataList);

export default {
    filters : {
        pinyin : function (value){
            return pinyin.getFullChars(value);
        }
    },
    data() {
        return {
            dataKey : 0,
            action : 'create',
            initialFormField : initialFormField,
            selectOptions: selectOptionsList,
            dialogFormVisible: false,
            formData: formData,
            formLabelWidth: '120px',
            tableTitleList : tableTitleList,
            tableDataList : tableDataList
        };
    },
    methods:{
        indexMethod(index) {
            return index + 1;
        },
        handleEdit(index, rowData){
            console.log(index);
            console.log(rowData);
            this.formData = setFormData(rowData);
            this.dataKey = index;
            this.action = "edit";
            this.dialogFormVisible = true;
        },
        handleDelete(index , rowData){
            this.$confirm("确认删除这个区域权限？" , "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() =>{
                this.tableDataList.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        },
        closeDialog(){
            this.formData = setFormData();
        },
        getDialogTitle(action){
            let actText = "";
            switch (action){
                case 'create':
                    actText = "创建" + dialogTitle;
                    break
                case 'edit':
                    actText = "编辑" + dialogTitle;
                    break
            }
            return actText;
        },
        submitForm(){
            console.log(this.$refs.actionInfo.value);
            if(this.$refs.actionInfo.value == 'create'){
                let newData = setFormData(this.formData);
                this.tableDataList.push(newData);
                this.$message({
                    type: 'success',
                    message: '创建成功!'
                });
                console.log(this.tableDataList);
            }
            if(this.$refs.actionInfo.value == 'edit'){
                console.log(this.$refs.dataKey.value);
                let newData = setFormData(this.formData);
                this.$set(this.tableDataList,this.$refs.dataKey.value,newData);
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                console.log(this.tableDataList);
            }
            this.dialogFormVisible = false;
        }

    }
};
</script>
<style lang="scss" scoped>
.container-style{
    margin: 12px;
    width: 98%;
    padding: 20px;
}
.avue-crud__left{
    position: absolute;
    left: 0;
}
.avue-crud__left button{
    width: 90px;
    font-size: 16px;
}
.el-table_1_column_1 .cell div{
    text-align: center;
}

.tabel-header div.cell{
    color: rgba(0,0,0,.85);
}
</style>
